<template>
    <div>
        <Header></Header>
        <Goods v-for="item in goodsList" :img="item.goods_img" :id="item.id" :title="item.goods_name"
            :price="item.goods_price" :count="item.goods_count" :state="item.goods_state">
        </Goods>
        <Footer></Footer>
    </div>
</template>
  
<script>
import Footer from '@/components/Footer/Footer.vue'
import Header from '@/components/Header/Header.vue'
import Goods from '@/components/Goods/Goods.vue'
import axios from 'axios'
import { mapState, mapGetters } from "vuex"


export default {
    methods: {
        async initCarList() {
            const { data: res } = await axios.get('https://www.escook.cn/api/cart')
            if (res.status === 200) {
                //更新goodslist
                this.$store.commit('getGoods', { list: res.list })
            }
        },
    },
    data() {
    },
    components: {
        Footer,
        Header,
        Goods

    },
    computed: {
        fullCheck() {
            return this.goodsList.every(v => v.goods_state)
        },
        ...mapState(['goodsList']),
    },
    created() {
        this.initCarList()

    },
    mounted() {

    },
}
</script>
  
<style lang="less" scoped>
.app-container {
    padding-top: 45px;
    padding-bottom: 50px;
}

.swiper-container {
    width: 100%;
    height: 9.375rem;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
}
</style>
  